<template>
  <view class="my-content">
   <view class="uni-flex uni-column">
     <!-- 设置按钮 -->
     <view class="setting-btn" @click="showOpenDrawer">
       <uni-icons type="gear" size="24" color="#fff"></uni-icons>
     </view>
     <!-- 上 -->
      <view class="flex-item flex-item-V my-header">
        <image class="avatar-bg-img" :src="orderForm.bgImage" mode="aspectFill"></image>
        <view class="avatar-main">
          <view>
            <image class="avatar-img" :src="orderForm.avarImage" mode="aspectFill"></image>
            <view class="avatar-title">
              <text class="title-one">{{ orderForm.username }}</text>
              <text>炭火号：{{ orderForm.userCode }}</text>
              <text>IP属地：{{ orderForm.provinceName }}</text>
            </view>
          </view>
        </view>
        <view class="avatar-info">
          <uni-row class="demo-uni-row">
            <uni-col :span="8">
              <p>110</p>
              <p>关注</p>
            </uni-col>
            <uni-col :span="8">
              <p>10000</p>
              <p>粉丝</p>
            </uni-col>
            <uni-col :span="8">
              <p>50000</p>
              <p>获赞与收藏</p>
            </uni-col>
          </uni-row>
        </view>
      </view>
      <!-- 中 -->
      <view class="flex-item flex-item-V my-card">
        <uni-card class="my-card-info" margin="0" :is-shadow="true">
          <uni-segmented-control :current="currentStatus" :values="navList" @clickItem="handleNavChange" styleType="text" activeColor="#EE3F4D">
          </uni-segmented-control>
          <view class="content"> 
            <view v-if="currentStatus == 0">
              <text>AAAAAA</text>
            </view>
            <view v-if="currentStatus == 1">
              <text>bbb</text>
            </view>
            <view v-if="currentStatus == 2">
              <text>ccc</text>
            </view>
          </view>
        </uni-card>
      </view>
      <!-- 下 -->
      <!-- <view class="flex-item flex-item-V">C</view> -->
      <!-- 设置-右弹出 -->
      <uni-drawer ref="showRightRef" mode="right" :mask-click="true">
        <scroll-view style="height: 100%; width: 100%;" scroll-y="true">
          <uni-section class="mb-10" title="设置" style="text-align: center;"></uni-section>
          <uni-list v-for="(item,index) in settingData" :key="index">
            <uni-list-item 
              :title="item.title" 
              :link="item.link"
              :to="item.to"
              :extra-icon="item.icons"
              :show-extra-icon="true"
              :show-arrow="true"
              @click="handleClickItem(item)"
            ></uni-list-item>
          </uni-list>
        </scroll-view>
      </uni-drawer>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';


const orderForm = ref({
  avarImage: null,
  bgImage: null,
})
/**本地缓存获取登录用户信息**/ 
const usersInfo = uni.getStorageSync('userInfo')
/** 获取用户信息 **/   
const getUserData = async ()=>{
  const { data: res } = await uni.$http.get('/getUserInfo',{ id: usersInfo.id })
  orderForm.value = res.data
  const avarArr = JSON.parse(res.data.avarImage) 
  const bgArr = JSON.parse(res.data.bgImage) 
  orderForm.value.avarImage = avarArr[0].url
  orderForm.value.bgImage = bgArr[0].url
}

// tab 选项区
const currentStatus = ref(0)
const navList = (['笔记', '收藏', '赞过'])
const handleNavChange = (e)=> {
  if(currentStatus.value != e.currentIndex) {
    currentStatus.value = e.currentIndex
  }
}
// 设置 -- 弹出
const showRightRef = ref(null)
const showOpenDrawer = ()=>{
  showRightRef.value.open()
}
const settingData = ref([
  { title: '账号信息',link:'navigateTo', to: '/subpage/userInfo/userInfo', icons: {color: '#000',size: '22',type: 'contact'} },
  { title: '登录',link:'navigateTo', to: '/pages/login/login', icons: {color: '#000',size: '22',type: 'personadd-filled'} },
  { title: '注册',link:'navigateTo', to: '/pages/register/register', icons: {color: '#000',size: '22',type: 'personadd'} },
  { title: '退出登录',link:'navigateTo', to: '/pages/login/login', icons: {color: '#000',size: '22',type: 'personadd'} }
])
const handleClickItem = (item)=>{
  if(item.title === '退出登录' || item.title === '登录'){
    uni.removeStorageSync('userInfo')
  }
}

getUserData()

// onMounted(() => {
//   getUserData()
//   if(usersInfo.id !== undefined && usersInfo.id !== null && usersInfo.id !== ''){
//     getUserData()
//   } else {
//     uni.showToast({ title:'请先登录', icon:'none', duration:3000 })
//     uni.navigateTo({ url:'/pages/login/login' })
//   }
// })
</script>

<style lang="scss">
.my-content {
  width: 100%;
  .my-header {
    height: 230px;
    color: #fff;
    background-color: #172367;
    .avatar-main {
      height: 80%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center; /* 垂直居中 */
    }
    .avatar-bg-img{
      position: absolute;
      width: 100%;
      height: 230px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      filter: blur(3px);
      z-index: -1;
    }
    .avatar-title {
      .title-one {
        font-size: 18px;
        font-family: Impact, Charcoal, sans-serif;
        margin: 5px auto;
      }
    }
    .avatar-info {
      text-align: center;
      font-size: 14px;
      height: 100px;
    }
    
  }
/* crad内容 */ 
.my-card {
  .my-card-info {
    // margin: 3px 5px;
  }
}

}

</style>
